<template>
    <slot name="start-button" v-bind="slotProps" v-if="!isRecording">
        <!-- <button @click="startRecording">Default Start Button</button> -->
    </slot>
    <slot name="stop-button" v-bind="slotProps" v-if="isRecording">
        <!-- <button @click="stopRecording">Default Stop Button</button> -->
    </slot>
</template>

<script setup>
import { useRecorder } from './useRecorder'; // 假设我们有一个自定义的useRecorder composable

const props = defineProps({
    onStop: Function,
});

const { startRecording, pauseRecording, stopRecording, getRecordedFile, isRecording } = useRecorder(
    props.onStop,
);

defineExpose({
    getRecordedFile,
    isRecording,
    stopRecording,
    pauseRecording,
    startRecording,
});

const slotProps = {
    isRecording,
    startRecording,
    stopRecording,
};
</script>

<style scoped>
button {
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}
</style>
